<template>
  <div class="detail-box">
    <div class="detail-page">
      <div class="generate-parameters">
        <h3>生成参数</h3>

        <el-form :model="form" label-width="160px">
          <!-- 采样方法改为输入框+下拉组合 -->
          <!-- <el-form-item label="采样方法 Sampler Method"> -->
          <div class="item">
            <div class="title">
              采样方法 <span>Sampler Method</span>
              <div class="yi-wen">
                <img src="@/assets/index/疑问_icon.png" alt="">
              </div>
            </div>

            <el-select
              slot="append"
              v-model="form.samplerMethod"
              placeholder="选择方法"
            >
              <el-option
                v-for="method in samplerMethods"
                :key="method"
                :label="method"
                :value="method"
              />
            </el-select>
          </div>

          <!-- 迭代步数带修复选项 -->
          <div class="item">
            <div class="title">
              迭代步数 <span>Sampling Steps</span>
              <div class="yi-wen">
                <img src="@/assets/index/疑问_icon.png" alt="">
              </div>
            </div>
            <div class="inline-options">
              <el-slider
                v-model="form.samplingSteps"
                :min="1"
                :max="100"
                :step="1"
                style="width: 370px"
              />
              <span class="value-display">{{ form.samplingSteps }}</span>

              <el-input-number
                v-model="form.samplingSteps"
                controls-position="right"
                style="width: 100px"
              />
            </div>

            <!-- 新增修复选项层级 -->
            <div
              class="repair-options"
              style="margin-top: 12px; margin-left: 8px"
            >
              <span
                class="repair-option"
                :class="{ active: form.samplingSteps === 30 }"
                @click="setSamplingSteps(30)"
              >
                面部修复
              </span>
              <span
                class="repair-option"
                :class="{ active: form.samplingSteps === 50 }"
                style="margin-left: 20px"
                @click="setSamplingSteps(50)"
              >
                高分辨率修复
              </span>
            </div>
          </div>

          <div class="form-row">
            <!-- <el-form-item label="宽度 Width" class="compact-item">
              <el-input-number
                v-model="form.width"
                :min="64"
                :max="2048"
                controls-position="right"
              />
            </el-form-item> -->

            <div class="weight">
              <div class="title">
                宽度 <span>Width</span>
                <el-input-number
                  v-model="form.width"
                  :min="64"
                  :max="2048"
                  controls-position="right"
                  style="margin-left: 40px"
                />
              </div>
              <el-slider
                v-model="form.width"
                :min="1"
                :max="1920"
                :step="1"
                style="width: 220px"
              />
            </div>

            <div class="zh-btn">
              <img src="@/assets/index/转换_btn.png" alt="">
            </div>

            <div class="height">
              <div class="title">
                高度 <span>Height</span>
                <el-input-number
                  v-model="form.height"
                  :min="64"
                  :max="2048"
                  controls-position="right"
                  style="margin-left: 40px"
                />
              </div>
              <el-slider
                v-model="form.height"
                :min="1"
                :max="1920"
                :step="1"
                style="width: 220px"
              />
            </div>
          </div>

          <div class="item">
            <div class="title">
              生成批次 <span>Batch Generation</span>
              <div class="yi-wen">
                <img src="@/assets/index/疑问_icon.png" alt="">
              </div>
            </div>
            <div class="inline-options">
              <el-slider
                v-model="form.batchGeneration"
                :min="1"
                :max="100"
                :step="1"
                style="width: 370px"
              />
              <span class="value-display">{{ form.batchGeneration }}</span>

              <el-input-number
                v-model="form.batchGeneration"
                controls-position="right"
                style="width: 100px"
              />
            </div>
          </div>

          <div class="item">
            <div class="title">
              图片数量 <span>Number Of Images</span>
              <div class="yi-wen">
                <img src="@/assets/index/疑问_icon.png" alt="">
              </div>
            </div>
            <div class="inline-options">
              <el-slider
                v-model="form.numberOfImages"
                :min="1"
                :max="100"
                :step="1"
                style="width: 370px"
              />
              <span class="value-display">{{ form.numberOfImages }}</span>

              <el-input-number
                v-model="form.numberOfImages"
                controls-position="right"
                style="width: 100px"
              />
            </div>
          </div>

          <div class="item">
            <div class="title">
              提示词引导系数 <span>CFG Scale</span>
              <div class="yi-wen">
                <img src="@/assets/index/疑问_icon.png" alt="">
              </div>
            </div>
            <div class="inline-options">
              <el-slider
                v-model="form.cfgScale"
                :min="1"
                :max="100"
                :step="1"
                style="width: 370px"
              />
              <span class="value-display">{{ form.cfgScale }}</span>

              <el-input-number
                v-model="form.cfgScale"
                controls-position="right"
                style="width: 100px"
              />
            </div>
          </div>

          <div class="item">
            <div class="title">
              随机数种子 <span>Seed</span>
              <div class="yi-wen">
                <img src="@/assets/index/疑问_icon.png" alt="">
              </div>
            </div>
            <div class="inline-options">
              <el-input-number
                v-model="form.seed"
                :min="-1"
                :max="999999"
                controls-position="right"
              />
              <div class="btn">
                <img src="@/assets/index/Group 5.png" alt="">
              </div>
              <div class="btn">
                <img src="@/assets/index/Group 4.png" alt="">
              </div>
            </div>
            <!-- 2 -->
            <div class="center">
              <div class="cen-left">
                <p>变异随机种子</p>
                <el-input-number
                  v-model="form.seed"
                  :min="-1"
                  :max="999999"
                  controls-position="right"
                />
              </div>
              <div class="btn">
                <img src="@/assets/index/Group 5.png" alt="">
              </div>
              <div class="btn">
                <img src="@/assets/index/Group 4.png" alt="">
              </div>
              <div class="cen-right">
                <p>变异强度</p>
                <el-input-number
                  v-model="form.seed"
                  :min="-1"
                  :max="999999"
                  controls-position="right"
                />
              </div>
            </div>

            <div>
              <div class="inline-options">
                <div>
                  <p>从宽度中调整种子</p>
                  <el-input-number
                    v-model="form.seed"
                    :min="-1"
                    :max="999999"
                    controls-position="right"
                  />
                </div>
                <div>
                  <p>从高度中调整种子</p>
                  <el-input-number
                    v-model="form.seed"
                    :min="-1"
                    :max="999999"
                    controls-position="right"
                  />
                </div>
              </div>
            </div>
          </div>

          <el-collapse v-model="activeCollapse" class="custom-collapse">
            <!-- 高分辨率修复 -->
            <el-collapse-item title="高分辨率修复 Hires.Fix" name="hires">
              <!-- 高分辨率修复区块 -->
              <div class="hires-fix-section">
                <!-- 放大算法 -->
                <!-- <el-row :gutter="24" class="algorithm-section">
                  <el-col :span="8"> </el-col>
                </el-row> -->
                <div class="parameter-group">
                  <div class="group-every">
                    <div class="subsection-header">
                      <div class="subsection-title">
                        <span>放大算法</span>
                      </div>
                      <el-select
                        v-model="hires.algorithm"
                        class="algorithm-select"
                        popper-class="algorithm-popper"
                      >
                        <el-option
                          v-for="algo in algorithms"
                          :key="algo.value"
                          :label="algo.label"
                          :value="algo.value"
                        />
                      </el-select>
                    </div>
                    <!-- 放大倍率 -->
                    <div class="parameter-item">
                      <div class="param-label">
                        放大倍率
                        <el-input-number
                          v-model="hires.denoising"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          :controls="false"
                          class="compact-input"
                        />
                      </div>
                      <div class="param-control">
                        <el-slider
                          v-model="hires.denoising"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          class="param-slider"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="group-every">
                    <!-- 重设迭代步数 -->
                    <div class="parameter-item">
                      <div class="param-label">
                        重设迭代步数
                        <el-input-number
                          v-model="hires.steps"
                          :min="0"
                          :controls="false"
                          class="compact-input"
                        />
                      </div>

                      <div class="param-control">
                        <el-slider
                          v-model="hires.steps"
                          :min="0"
                          :max="100"
                          class="param-slider"
                        />
                      </div>
                    </div>
                    <!-- 将宽度调整到 -->
                    <div class="parameter-item">
                      <div class="param-label">
                        将宽度调整到
                        <el-input-number
                          v-model="hires.width"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          :controls="false"
                          class="compact-input"
                        />
                      </div>
                      <div class="param-control">
                        <el-slider
                          v-model="hires.width"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          class="param-slider"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="group-every">
                    <!-- 重绘幅度 -->
                    <div class="parameter-item">
                      <div class="param-label">
                        重绘幅度
                        <el-input-number
                          v-model="hires.denoising"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          :controls="false"
                          class="compact-input"
                        />
                      </div>
                      <div class="param-control">
                        <el-slider
                          v-model="hires.denoising"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          class="param-slider"
                        />
                      </div>
                    </div>

                    <!-- 将高度调整到 -->
                    <div class="parameter-item">
                      <div class="param-label">
                        将高度调整到
                        <el-input-number
                          v-model="hires.height"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          :controls="false"
                          class="compact-input"
                        />
                      </div>
                      <div class="param-control">
                        <el-slider
                          v-model="hires.height"
                          :min="0"
                          :max="1"
                          :step="0.1"
                          class="param-slider"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>

            <!-- 细节修复 -->
            <el-collapse-item title="细节修复 ADetailer" name="adetailer">
              <div class="collapse-content">
                <div class="form-group">
                  <div class="switch-container">
                    <span>启用修复单元</span>
                    <el-switch v-model="adetailer.enabled" />
                  </div>

                  <div class="model-select">
                    <el-select
                      v-model="adetailer.model"
                      placeholder="选择检测模型"
                    >
                      <el-option label="face_volov8n.pt" value="face_volov8n" />
                    </el-select>
                  </div>

                  <div class="repair-units">
                    <div
                      v-for="(unit, index) in adetailer.units"
                      :key="index"
                      class="unit-item"
                    >
                      <h5>修复单元 {{ index + 1 }}</h5>
                      <el-input
                        v-model="unit.prompt"
                        placeholder="输入细节修复提示词"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>

            <!-- ControlNet -->
            <el-collapse-item title="ControlNet" name="controlnet">
              <div class="collapse-content">
                <div class="controlnet-item">
                  <div class="switch-container">
                    <span>启用ControlNet</span>
                    <el-switch v-model="controlnet.enabled" />
                  </div>
                  <div class="model-select">
                    <el-select
                      v-model="controlnet.model"
                      placeholder="选择ControlNet模型"
                    >
                      <!-- 添加具体模型选项 -->
                    </el-select>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>

          <el-form-item>
            <el-button type="primary" @click="submit">开始生成</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 加载状态优化 -->
    <div class="loading-panel">
      <div class="title">在线预览</div>
      <div v-if="loading" class="loading-content">
        <!-- <div class="loading-content"> -->
        <img src="@/assets/index/生图空状态.png" alt="">
        <div class="spinner">
          <div class="rect1" />
          <div class="rect2" />
          <div class="rect3" />
          <div class="rect4" />
        </div>
        <div class="progress-container">
          <div class="progress-text">{{ progressMessage }}</div>
          <el-progress
            :percentage="progress"
            :show-text="false"
            stroke-linecap="square"
            :stroke-width="16"
            color="#409EFF"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '../../utils/eventBus'
export default {
  data() {
    return {
      form: {
        samplerMethod: 'Euler', // 采样方法
        samplingSteps: 7, // 采样步骤
        width: 64, // 宽度
        height: 1024, // 高度
        batchGeneration: 1, // 批次生成数量
        numberOfImages: 4, // 图片数量
        cfgScale: 7, // CFG比率
        seed: -1, // 随机种子
        variateSeed: false, // 是否变化种子
        seedFromWidth: false // 是否根据宽度生成种子
      },
      samplerMethods: [
        // 采样方法列表
        'Euler',
        'LMS',
        'Heun',
        'DPM2',
        'DPM2 a',
        'DPM fast',
        'DPM adaptive'
      ],
      loading: false, // 加载状态
      progress: 0, // 进度
      activeCollapse: ['hires', 'adetailer', 'controlnet'], // 激活的折叠项

      hires: {
        // Hires 部分的配置
        algorithm: 'latent', // 采用的算法
        steps: 0, // 步骤
        denoising: 0.7, // 降噪系数
        width: 0, // 输出宽度
        height: 0 // 输出高度
      },

      algorithms: [
        // 可选的算法
        { label: 'Latent', value: 'latent' },
        { label: 'ESRGAN', value: 'esrgan' },
        { label: 'SwinIR', value: 'swinir' }
      ],

      adetailer: {
        // Adetailer 部分的配置
        enabled: true, // 是否启用
        model: 'face_volov8n', // 模型
        units: [{ prompt: '' }, { prompt: '' }, { prompt: '' }] // 单元数组
      },

      controlnet: {
        // ControlNet 配置
        enabled: false, // 是否启用
        model: '' // 模型
      }
    }
  },

  computed: {
    progressMessage() {
      return `生成进度 ${this.progress}% (剩余时间约 ${Math.round(
        (100 - this.progress) / 10
      )}s)` // 计算生成进度及预计剩余时间
    }
  },
  mounted() {
    EventBus.$on('callDetailMethod', this.submit)
  },
  beforeDestroy() {
    EventBus.$off('callDetailMethod', this.submit)
  },

  methods: {
    submit() {
      this.loading = true
      this.progress = 0
      const interval = setInterval(() => {
        this.progress += Math.floor(Math.random() * 5) + 1 // 每次随机进度增加
        if (this.progress >= 100) {
          clearInterval(interval) // 进度达到100后停止
          this.loading = false // 结束加载
        }
      }, 500)
    },

    setSamplingSteps(value) {
      this.form.samplingSteps = value // 设置采样步骤
    },
    receiveData(data) {
      console.log(data)
    }
    // 可扩展其他方法...
  }
}
</script>

<style lang="scss" scoped>
/* 标题样式 */
.title {
  border-left: 4px solid #427aef;
  padding-left: 12px;
  color: #2c3e50;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  position: relative;

  span {
    color: #bcc2c8;
    font-weight: normal;
    font-size: 16px;
  }

  .yi-wen {
    display: inline-block;
    margin-left: 3px;

    img {
      position: absolute;
      top: 0;
    }
  }
}

/* 维修选项 */
.repair-options {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}

.repair-option {
  cursor: pointer;
  color: #333;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;

  &:hover {
    background-color: #f0f0f0;
  }

  &.active {
    color: #409eff;
    font-weight: bold;
    background-color: #ecf5ff;
  }
}

/* 选择框 */
.el-select {
  width: 500px;
}

/* 详情容器 */
.detail-box {
  display: flex;
  // padding: 20px;
  // background: #f0f4ff;
  // gap: 30px;
  margin-top: 30px;
  background: linear-gradient(#edf6ff 0%, #ffffff 19%);
  box-shadow: 0px 2px 8px 0px rgba(121, 141, 183, 0.2),
    inset 0px 0px 2px 0px #cde4ff;
  border-radius: 4px 4px 4px 4px;
}

/* 参数生成面板 */
.generate-parameters {
  padding: 0 24px;

  h3 {
    width: 136px;
    height: 44px;
    background: linear-gradient(
      bottom,
      rgba(56, 122, 255, 0) 0%,
      rgba(56, 122, 255, 0.2) 100%
    );
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #387aff;
  }
}

/* 表单项 */
.item {
  margin-top: 20px;

  .center {
    height: 94px;
    display: flex;

    .btn {
      height: 100% !important;
      display: flex;
      align-items: flex-end;
      margin: 0 10px;
    }
  }
}

/* 表单行 */
.form-row {
  display: flex;
  gap: 30px;
  margin-top: 18px;

  .title {
    height: 30px;
  }

  .zh-btn {
    display: flex;
    align-items: center;

    img {
      cursor: pointer;

      &:active {
        transform: scale(1.15) !important;
        transition: all 0.1s ease-in-out;
        color: #00ffff;
      }
    }
  }

  .compact-item {
    margin-bottom: 0;

    ::v-deep .el-form-item__content {
      min-width: 120px;
    }
  }

  ::v-deep .el-input-number {
    width: 100px;
  }

  ::v-deep .el-input-number__decrease,
  ::v-deep .el-input-number__increase {
    width: 27px !important;
  }
}

/* 内联选项 */
.inline-options {
  display: flex;
  align-items: center;
  gap: 20px;

  .value-display {
    min-width: 40px;
    text-align: center;
  }

  ::v-deep .el-input-number__decrease,
  ::v-deep .el-input-number__increase {
    width: 27px !important;
  }
}

/* 种子设置 */
.seed-settings {
  display: flex;
  align-items: center;
  gap: 15px;

  .seed-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}
</style>
<style lang="scss" scoped>
/* 加载面板 */
.loading-panel {
  flex: 1;
  // background: white;
  // border-radius: 8px;
  padding: 24px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ffffff;
  border-radius: 4px 4px 4px 4px;
  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}

/* 加载动画 */
.spinner {
  margin: 40px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;

  > div {
    background-color: #409eff;
    height: 100%;
    width: 6px;
    display: inline-block;
    margin: 0 3px;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }

  .rect2 {
    animation-delay: -1.1s;
  }
  .rect3 {
    animation-delay: -1s;
  }
  .rect4 {
    animation-delay: -0.9s;
  }
  .rect5 {
    animation-delay: -0.8s;
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* 进度条 */
.progress-container {
  width: 80%;
  margin-top: 20px;

  .progress-text {
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
  }
}

/* 复用样式 */
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin form-group {
  margin: 16px 0;
  padding: 12px;
  background: #f8f9fc;
  border-radius: 6px;
}

/* 折叠面板 */
.custom-collapse {
  margin: 20px 0;

  ::v-deep .el-collapse-item__header {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #eee;
  }

  ::v-deep .el-collapse-item__content {
    padding: 16px 0;
  }
}

/* 其他设置 */
.hires-fix-section {
  // margin: 20px 0;
  // padding: 16px;
  // background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dimension-options {
  display: flex;
  gap: 20px;
  margin-top: 12px;

  .dim-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* 开关容器 */
.switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* 维度输入 */
.dimension-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;

  .tiny-input {
    ::v-deep .el-input__inner {
      height: 32px;
      width: 80px;
      padding: 0 8px;
    }
  }

  .unit-label {
    font-size: 12px;
    color: #909399;
  }
}
.subsection-header {
  margin-bottom: 16px;
  // background-color: #409eff;
  .subsection-title {
    font-size: 16px;
    // color: red;
    margin-right: 12px;
    min-width: 72px;
    margin-bottom: 10px;
    padding-top: 5px;
  }

  .algorithm-select {
    // flex: 1;
    width: 160px;

    ::v-deep .el-input__inner {
      height: 46px;
      padding: 0 12px;
      background: #f5f7fa;
      border-color: #e4e7ed;
    }
  }
  ::v-deep {
    .el-input__inner {
      width: 159px;
    }
  }
}

.parameter-group {
  // border-right: 1px solid #ebeef5;
  display: flex;
  // width: 500px;
  // justify-content: space-around;
  .group-every {
    display: inline-block;
    // background-color: #606266;
    margin: 5px;
    margin-left: 20px;
  }
}

.parameter-item {
  margin-bottom: 24px;
  .param-label {
    // background-color: #409eff;
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #3e4654;
    margin-bottom: 8px;
    ::v-deep {
      .compact-input {
        width: 50px;
      }
    }
  }

  .param-control {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .compact-input {
    width: 80px;

    ::v-deep .el-input__inner {
      height: 32px;
      padding: 0 8px;
      text-align: center;
    }
  }

  .param-slider {
    flex: 1;

    ::v-deep .el-slider__runway {
      height: 4px;
      background-color: #ebeef5;
    }

    ::v-deep .el-slider__bar {
      height: 4px;
      background-color: #427aef;
    }

    ::v-deep .el-slider__button {
      width: 14px;
      height: 14px;
      border: 2px solid #427aef;
    }
  }
}

.scale-controls {
  .dimension-control {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 12px;

    + .dimension-control {
      margin-top: 16px;
    }
  }

  .dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    span {
      font-size: 13px;
      color: #606266;
    }
  }

  .adjust-buttons {
    display: flex;
    align-items: center;
    gap: 8px;

    .adjust-btn {
      width: 24px;
      height: 24px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background: #ffffff;
      cursor: pointer;
      font-size: 14px;
      line-height: 22px;

      &:hover {
        border-color: #c0c4cc;
      }
    }

    .scale-value {
      width: 32px;
      text-align: center;
      font-size: 14px;
      color: #303133;
    }
  }

  .dimension-inputs {
    .tiny-input {
      width: 100%;
      margin-bottom: 8px;

      ::v-deep .el-input__inner {
        height: 32px;
        padding: 0 8px;
        text-align: center;
      }
    }

    .slider-container {
      position: relative;
      padding: 8px 0;
    }

    .dimension-slider {
      ::v-deep .el-slider__runway {
        height: 4px;
        margin: 0;
      }

      ::v-deep .el-slider__bar {
        height: 4px;
      }

      ::v-deep .el-slider__button {
        width: 14px;
        height: 14px;
        top: -6px;
      }
    }

    .unit-label {
      position: absolute;
      right: 0;
      bottom: -4px;
      font-size: 12px;
      color: #909399;
    }
  }
}
</style>
